<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0 !important;
            color: white;
        }

        .header {
            height: 80px;
            background: #1f286f;
        }

        .main {
            height: calc(100% - 80px);
        }

        html, body, div.container-fluid {
            height: 100%;
        }

        div.left, div.right {
            height: 100%;
            float: left;
        }

        div.left {
            width: 200px;/*#1f286f*/
            background: #1f286f;
        }

        div.right {
            width: calc(100% - 200px);
        }
        .menu{
            list-style: none;
        }

        .menu li{
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        .menu a{
            text-decoration: none;
        }

        .menu li:hover{
            background: #6f7be8;
        }

    </style>
</head>
<body>
<div class="container-fluid">
    <div class="header">
        Header
    </div>
    <div class="main">
        <div class="left">
            <ul class="menu"><a href="dept.html" target="targetFrame">
                <li>部门管理</li>
            </a><a href="emp.html" target="targetFrame">
                <li>员工管理</li>
            </a><a href="#">
                <li>列表项3</li>
            </a><a href="#">
                <li>列表项4</li>
            </a><a href="./upload.html" target="targetFrame">
                <li>文件上传</li>
            </a></ul>
        </div>
        <div class="right">
            <iframe src="https://www.baidu.com/" name="targetFrame" frameborder="0" style="width: 100%;height: 100%" ></iframe>
        </div>
    </div>
</div>
</body>
</html>